<!doctype html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>RetroArch Web Player</title>
   <script type="text/javascript" src="browserfs.js"></script>

   <style>
      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
      textarea.emscripten { border: 0px; font-family: 'Share Tech Mono'; font-size: 12px; width: 100%; overflow:hide; resize:none; color:black; }
      div.emscripten, h1 { text-align: left; }
      div.canvas_border { background-color:gray; width:800px; height:600px; margin-left: auto; margin-right: auto; }
      canvas.emscripten { border: 0px none; }
   </style>
</head>
<body>
   <hr/>
   <div class="emscripten_border" id="canvas_div" style="display: none">
      <canvas class="emscripten" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
   </div>
   <div class="emscripten emscripten_border" id="openrom">
      <button id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button>
      <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" onchange="runEmulator(event.target.files);" multiple />
      <button id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
   </div>
   <hr/>
   <div class="emscripten">
      <input type="checkbox" id="resize"><label for="resize">Resize canvas</label>
      <input type="checkbox" id="pointerLock" checked><label for="pointerLock">Lock/hide mouse pointer</label>
      <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)"><br>
      <input type="checkbox" id="vsync"><label for="vsync" id="vsync-label">Enable V-sync (can only be done before loading game)</label><br>
      <input type="checkbox" id="sdl2"><label for="sdl2" id="sdl2-label">Enable SDL2</label><br>
      <input type="textbox" id="latency" size="3" maxlength="3" value="96"> <label for="latency" id="latency-label">Audio latency (ms) (increase if you hear pops at fullspeed, can only be done before loading game)</label>
   </div>

   <div class="emscripten" id="controls">
      Controls:<br>
      <br>
      A button (OK in menu): X<br>
      B button (Back in menu): Z<br>
      X Button: S<br>
      Y Button: A<br>
      L Button: Q<br>
      R Button: W<br>
      D-pad: Arrow Keys<br>
      Start Button: Enter<br>
      Select Button: Shift<br>
      Toggle Menu: F1<br>
      Fast forward: Spacebar (toggle)<br>
      Slow motion: E (hold)</br>
      Save state: F2<br>
      Load state: F4
   </div>

</body>
</html>
<script type='text/javascript'>
   var count = 0;
   function runEmulator(files)
   {
      count = files.length;
      document.getElementById("openrom").innerHTML = '';
      document.getElementById("openrom").style.display = 'none';
      for (var i = 0; i < files.length; i++)
      {
         filereader = new FileReader();
         filereader.file_name = files[i].name;
         filereader.onload = function(){uploadData(this.result, this.file_name)};
         filereader.readAsArrayBuffer(files[i]);
    }
  }
  function startRetroArch()
  {
      Module.FS_createFolder('/', 'etc', true, true);
      Module.FS_createFolder('/', 'config', true, true);
      Module.FS_createFolder('/', 'content', true, true);
      Module.FS_createFolder('/', 'savefiles', true, true);
      Module.FS_createFolder('/', 'savestates', true, true);
      var config = 'input_player1_select = shift\n';
      var latency = parseInt(document.getElementById('latency').value, 10);
      if (isNaN(latency)) latency = 96;
      config += 'audio_latency = ' + latency + '\n'
      if (document.getElementById('vsync').checked)
         config += 'video_vsync = true\n';
      else
         config += 'video_vsync = false\n';
      Module.FS_createDataFile('/etc', 'retroarch.cfg', config, true, true);
      document.getElementById('canvas_div').style.display = 'block';
      document.getElementById('vsync').disabled = true;
      document.getElementById('vsync-label').style.color = 'gray';
      document.getElementById('latency').disabled = true;
      document.getElementById('latency-label').style.color = 'gray';
      Module['callMain'](Module['arguments']);
  }

   function uploadData(data, name)
   {
      var dataView = new Uint8Array(data);
      Module.FS_createDataFile('/', name, dataView, true, false);
   }

   var Module =
   {
      noInitialRun: true,
      arguments: ["-v", "--menu"],
      preRun: [],
      postRun: [],
      print: (function()
      {
         return function(text)
         {
            text = Array.prototype.slice.call(arguments).join(' ');
            console.log(text);
         };
      })(),

      printErr: function(text)
      {
         var errArgs = Array.prototype.slice.call(arguments).join(' ');
         console.error(errArgs);
      },
      canvas: document.getElementById('canvas'),

      totalDependencies: 0,
      monitorRunDependencies: function(left)
      {
         this.totalDependencies = Math.max(this.totalDependencies, left);
      }
   };

</script>
<script type="text/javascript" src="browserfs.js"></script>
<script type="text/javascript" src="gambatte.js"></script>
